<template>
   <!-- 登录 -->
    <div >
        <div class="login-wrap"  :class="{'act':isShow}" @click.stop="closemodel"></div>
        <div class="mock_box"  :class="{'act':isShow}" >
            <div class="login" >
              <!-- 标题 -->
              <div class="title flex-col flex-center ">
                <span class="mobile">手机号登录</span>
                <span>首次登录可得¥280新人礼券</span>
              </div>
              <!-- 手机号 验证码 -->
              <div class="inputdiv">
                  <div class="phone-code">
                    <input type="text" v-model="loginParms.mobile" placeholder="请输入手机号码">
                    <i class="del-c  flex-center" @click.stop="clearMobile" v-if="loginParms.mobile">x</i>
                  </div>
                  <div class="login-verify flex-between phone-code">
                      <input type="number" maxlength="6" v-model="loginParms.code" placeholder="验证码">
                      <p class="btn flex-center" :class="{btnclicked:timeSecs>1}" @click.stop="getValiCode">{{sentCode}}</p>
                  </div>
              </div>
              <!-- 登录按钮 -->
              <div  class="btnitem flex-center" :class=" loginParms.mobile &&loginParms.code ? 'haslogin' : ''"  @click="loginRegist" >登录 </div>
              
            </div>
        </div>
    </div>
</template>
<script>
import { AntiBrush } from "../common/anti-brush";
import { mapGetters } from "vuex";
import { MD5, Checking } from "../common/util";
import * as api from "../common/api/user";
const regMObile = /^1[3|5|7|8][0-9]\d{8}$/
export default {
  data() {
    return {
      loginParms: {
        mobile: null,
        code: null
      },
      currentCode: "", // 区域号
      sentCode: "获取验证码",
      timeSecs: 0
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters({ user: "userInfo", selectCountryCode: "selectCountryCode" }),
    btnBg() {
      if (this.loginParms.mobile && this.loginParms.code) {
        return true;
      } else return false;
    }
  },
  watch: {
    isShow: function(n, o) {
      if (n) document.body.classList.add("lock");
      else document.body.classList.remove("lock");
    },
    selectCountryCode: function(val, oldVal) {
      this.currentCode = val;
    }
  },
  mounted() {
    let _ = this;
    _.currentCode = _.selectCountryCode;
  },
  methods: {
    closemodel() {
      let _=this
      document.body.classList.remove("lock");
      _.$emit("close", "关闭");
    },
    clearMobile(){
      this.loginParms.mobile =''
    },
    //登录方法
    loginRegist() {
      let _ = this;
      if (_.currentCode == "+86" && !regMObile.test(_.loginParms.mobile)) {
        _.toast("请输入合法的手机号码");
        return;
      }
      if (!_.loginParms.code) {
        _.toast("请输入验证码");
        return;
      }
      let sin = MD5("+86-" + _.loginParms.mobile + "3111.2.7.1511");
      let option = {
        code: _.loginParms.code,
        mobile: _.currentCode + "-" + _.loginParms.mobile,
        nonceStr: sin
      };
      api
        .postUserRegister(option)
        .then(res => {
          _.toast("登录成功");
          // window.localStorage.setItem("currentUser", JSON.stringify(res));
          _.$store.dispatch("setUserInfo", res);
          _.closemodel();
        })
        .catch(e => {
          if (e && e.code == 1511533) {
            _.toast(e.msg)
          }else 
          _.toast("登录失败");
          console.error(e);
        });
    },
    getValiCode() {
      // 验证手机号
      let _ = this;
      if (_.timeSecs > 1) return;

      if (_.currentCode == "+86" && !regMObile.test(_.loginParms.mobile)) {
        _.toast("请输入合法的手机号码");
        return false;
      }
      let option = {
        checktype: 1,
        mobile: _.currentCode + "-" + _.loginParms.mobile
      };
      AntiBrush(option, res => {
        if (res) {
          api
            .ValidSendCaptcha(res)
            .then(res => {
              // 发送验证码
              if (!res) {
                _.timeSecs = 60;
                _.toast("发送成功");
                _.timeRun = setInterval(() => {
                  if (_.timeSecs > 1) {
                    _.timeSecs--;
                    _.sentCode =
                      "获取验证码" + _.decpadleft(_.timeSecs) + "s" ;
                  } else {
                    _.sentCode = "重新获取验证码";
                    clearInterval(_.timeRun);
                    _.timeRun = null;
                  }
                }, 1000);
              }
            })
            .catch(e => {
              if (e && e.code == 1511531) {
                _.toast("验证码发送频繁,请60s之后再试");
              } else if (e && e.code == 1511543) {
                _.toast = "未注册号码";
                // _.toast('未注册号码')
              } else if (e && e.code == 1511544) {
                _.toast = "账号已被注册";
                // _.toast('账号已被注册')
              } else _.toast("验证码发送失败");
            });
        } else {
          _.toast("验证失败了~");
        }
      });
    },
    decpadleft(val) {
      if (val < 10) return "0" + val;
      else return val;
    }
  }
};
</script>
<style scoped>
.login-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  pointer-events: none;
  background: transparent;
  transition: background 0.3s ease-in;
}
.login-wrap.act {
  pointer-events: unset;
  background: rgba(0, 0, 0, 0.5);
}
.mock_box {
  position: fixed;
  width: 100%;
  background: #fff;
  right: 0;
  bottom: 0;
  transform: translate(0, 100vh);
  padding: 4.4vw 2.933vw 8.8vw 2.93vw;
  transition: transform 0.2s ease-in;
  z-index: 200;
  border-radius: 10px 10px 0 0;
}

.mock_box.act {
  transform: translate(0, 0);
}
.login .title {
  font-size: 15px;
  color: #b4b4b4;
  line-height: 24px;
  margin-bottom: 4.4vw;
}
.login .title .mobile {
  font-size: 18px;
  color: #3c3c3c;
  font-weight: bold;
  font-family: PingFang-SC-Heavy;
}
.phone-code {
  border-bottom: 1px solid #c8c8c8;
  font-size: 17px;
  line-height: 33px;
  color: #c8c8c8;
  margin-bottom: 28px;
  padding-left: 5%;
  position: relative;
}
.phone-code::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 20px;
  background: url("/static/imgs/plat/tel.png") 0 0 no-repeat;
  background-size: 90% 90%;
}
.phone-code input {
  width: 80%;
  margin: 0;
  padding: 0;
  height: 33px;
  padding-left: 10px;
}
.phone-code .del-c {
  position: absolute;
  right: 15px;
  top: 9px;
  width: 16px;
  height: 16px;
  font-style: normal;
  border: 1px solid #000;
  border-radius: 50%;
  color: #000;
  font-size: 12px;
}
.login-verify.phone-code::before {
  width: 16px;
  height: 18px;
  background: url("/static/imgs/plat/securityCod.png") 0 0 no-repeat;
  background-size: 90% 90%;
}
.login-verify.phone-code input{
  width: 60%;
}
.login-verify .btn.btnclicked{
  background: #B4B4B4;
}
.login-verify .btn{
  width:30vw;
  height: 7.4vw;
  background: #3c3c3c;
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
  margin-right: 15px;
  border-radius: 3.7vw;
}
.btnitem{
  height: 42px;
  background: #B4B4B4;
  color: #fff;
  border-radius: 21px;
}
.haslogin{
  background: #3C3C3C;
}
</style>


